<template>
  <div class="home">
    <header>
      <input type="text" v-model="msg" /> <button @click="add">添加</button>
    </header>
    <ul>
      <li
        v-for="(item, index) in msgList"
        :class="{ active: checkIndex == index }"
        @click="$store.commit('cutTab', index)"
      >
        {{ item.name }}
      </li>
    </ul>
    <div class="count-active">
      <template v-for="(n, i) in msgList">
        <transition :name="activeName">
          <div class="count" v-if="checkIndex == i" :key="i">
            <h5>{{ msgList[i].val }}</h5>
            <ol>
              <li v-for="(item, index) in msgList[i].children">
                <span v-if="item.showSpan" @dblclick="item.showSpan = false">{{
                  item.msg
                }}</span>
                <input
                  v-else
                  type="text"
                  v-model="item.msg"
                  @blur="update(item)"
                />
                <span class="right" @click="$store.commit('msgDel', index)"
                  >删除</span
                >
              </li>
            </ol>
          </div>
        </transition>
      </template>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useStore } from "vuex";
export default {
  name: "Home",
  setup() {
    const store = useStore();
    const activeName = ref('fadein');
    const data = reactive({
      msgList: computed(() => store.state.list),
      checkIndex: computed(() => store.state.checkIndex),
      msg: "", // 输入框的值
    });
    const add = () => {
      // 添加的函数
      if (data.msg) {
        store.commit("addMsg", data.msg);
        data.msg = "";
      } else {
        alert("输入不能为空！");
      }
    };
    const update = (val) => {
      if (val.msg) {
        val.showSpan = true;
      } else {
        alert("修改内容不能为空！");
      }
    };
    watch(()=> store.state.checkIndex,(newVal,oblVal) => {
      if (newVal>oblVal){
        activeName.value = 'fadein'
      } else {
        activeName.value = 'fadeout'
      }
    })
    return {
      ...toRefs(data),
      add,
      update,
      activeName
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 600px;
  margin: 100px auto;
  border: 1px solid #ccc;
  background: #e9e9e9;
  header {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: center;
    input {
      width: 300px;
      height: 35px;
    }
    button {
      height: 40px;
      padding: 0 20px;
      margin-left: 20px;
    }
  }
}
ul {
  display: flex;
  li {
    line-height: 50px;
    text-align: center;
    width: 100px;
    background: rgb(7, 151, 7);
    cursor: pointer;
  }
  .active {
    color: #fff;
    background: rgb(35, 35, 236);
  }
}
.count-active {
  position: relative;
  overflow: hidden;
  background: #e9e9e9;
  height: 500px;
}
.count {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0;
  h5 {
    line-height: 50px;
    font-weight: 900;
    text-align: center;
    font-size: 20px;
  }
  li {
    height: 50px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    .right {
      display: none;
    }
    &:hover {
      background: blue;
      color: #fff;
      .right {
        display: inline-block;
      }
    }
  }
}
.fadeout-enter-active,.fadein-enter-active {
  transition: all 0.3s ease-out;
}

.fadeout-leave-active,.fadein-leave-active {
  transition: all 0.3s ease-out;
}

.fadein-enter-from {
  transform: translateX(100%);
}
.fadein-leave-to {
  transform: translateX(-100%);
}

.fadeout-enter-from {
  transform: translateX(-100%);
}
.fadeout-leave-to {
  transform: translateX(100%);
}
</style>
